<%--
  Created by IntelliJ IDEA.
  User: BluceYoung
  Date: 2020/12/7
  Time: 9:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../temp/index_head.jsp">
    <jsp:param name="title" value="头像修改"/>
    <jsp:param name="needCropper" value="true"/>
</jsp:include>
<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="x_panel">
        <div class="x_title">
            <h2>头像修改 <small>different form elements</small></h2>
            <div class="clearfix"></div>
        </div>
        <div class="x_content">
            <input type="file" id="fileHead" onchange="show(this)" />
            <button type="button" class="btn btn-default" onclick="$('#imgTeset').cropper('setDragMode','move')">移动</button>
            <button type="button" class="btn btn-default" onclick="horizontal()">水平翻转</button>
            <button type="button" class="btn btn-default" onclick="vertical()">垂直翻转</button>
            <button type="button" class="btn btn-success" onclick="cut()">裁剪</button>
            <div style="width: 600px;height: 600px;"><!--必须通过父容器限定图像大小 -->
                <img id="imgTeset" src="">
            </div>

        </div>
    </div>
</div>
<jsp:include page="../temp/index_foot.jsp">
    <jsp:param name="needCropper" value="true"/>
</jsp:include>
<script type="text/javascript">
    function show(a){
        var $file = $(a);
        var fileObj = $file[0];
        var windowURL = window.URL || window.webkitURL;
        var dataURL = null;
        if (!fileObj || !fileObj.files || !fileObj.files[0]){//没有选择图片
            return;
        }
        dataURL = windowURL.createObjectURL(fileObj.files[0]);
        $("#imgTeset").attr('src', dataURL);
        $('#imgTeset').cropper({
            aspectRatio: 1 / 1,//长款1比1的比例
            viewMode: 1
        });
        $("#imgTeset").cropper('replace', dataURL);
    }
    var currentHorizontal=1;
    var currentVertical=1;
    //水平翻转
    function horizontal(){
        currentHorizontal*=-1;
        $('#imgTeset').cropper('scaleX',currentHorizontal);
    }
    //垂直翻转
    function vertical(){
        currentVertical*=-1;
        $('#imgTeset').cropper('scaleY',currentVertical);
    }

    function cut(){
        var size={width:220,height:220};//要裁剪成的图像大小
        var cas = $('#imgTeset').cropper('getCroppedCanvas',size);
        if(cas == null){
            alert("请选择图片");
            return false;
        }else{
            var base64url = cas.toDataURL('image/jpeg');//转换成图片格式
            $.ajax({
                url : "${pageContext.request.contextPath}/user/uploadhead",//上传地址
                dataType:'text',
                type: "post",
                data: {
                    fileName : "temp",
                    imgBase64 : base64url
                },
                success: function (data) {
                    alert(data);
                    if(data.indexOf("成功")>=0){
                        window.location="${pageContext.request.contextPath}";
                    }
                }
            });
        }
    }
</script>
